<!-- 设备加工控制 devicework -->
<template>
  <div class="devicework-container">
    <div class="device-work">
      <div class="device-list">
        <div class="head">
          <div class="head-left">
            <div class="title-decorator"></div>
            <div class="title">
              设备加工控制
            </div>
          </div>
          <div class="head-right">
            <div class="device-title">{{ deviceData.title }}</div>
          </div>
        </div>
        <div class="mian">
          <div class="device-lists">
           <div class="list-head">
            <div>参数</div>
            <div>设定值</div>
            <div>实时状态</div>
            <!-- <div>控制</div> -->
           </div>
           <div class="list-body">
            <div :class="['list-item']" v-for="(item, idx) in deviceData.params" :key="idx">
              <div class="cell">
                <span>{{ item.title }}</span>
              </div>
              <div class="cell">
                <div v-if="item.value.type === 'switch'" class="cell-switch cell-on-off">
                  <div :class="['on', item.value.default === 1 ? 'active' : '']">开</div>
                  <div :class="['off', item.value.default === 0 ? 'active' : '']">关</div>
                </div>
                <div v-else-if="item.value.type === 'level'" class="cell-switch cell-level">
                  <div :class="['tall', item.value.default === 2 ? 'active' : '']">高</div>
                  <div :class="['normal', item.value.default === 1 ? 'active' : '']">正常</div>
                  <div :class="['low', item.value.default === 0 ? 'active' : '']">低</div>
                </div>
                <span v-else> {{ item.value.default }}</span>
              </div>
              <div class="cell">
                <div v-if="item.value.type === 'switch'" class="cell-switch cell-on-off">
                  <div :class="['on', item.value.real === 1 ? 'active' : '']">开</div>
                  <div :class="['off', item.value.real === 0 ? 'active' : '']">关</div>
                </div>
                <div v-else-if="item.value.type === 'level'" class="cell-switch cell-level">
                  <div :class="['tall', item.value.real === 2 ? 'active' : '']">高</div>
                  <div :class="['normal', item.value.real === 1 ? 'active' : '']">正常</div>
                  <div :class="['low', item.control === 0 ? 'active' : '']">低</div>
                </div>
                <span v-else> {{ item.value.real }}</span>
              </div>
              <!-- <div class="cell">
                <span v-if="item.control === undefined"> / </span>
                <div v-else class="cell-switch cell-control">
                  <div :class="['handle', item.control === 1 ? 'active' : '']">手动</div>
                  <div :class="['auto', item.control === 0 ? 'active' : '']">自动</div>
                </div>
              </div> -->
            </div>
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Tcmd } from './command'
import { getBroadcastInstance } from './broadcastUtils';
import * as echarts from 'echarts';
import { Tsrv } from '@/services';

interface parameter {
  // 该参数的名称
  title: string;
  // 该参数的key值（唯一识别）
  key: string;
  value: {
    // 该参数的类型（string、level） // 液位：高、正常、低。控制：手动、自动。开关：开、关
    type: string;  //  string   switch 
    // 设定值
    default: any;
    // 实时值
    real: any;
  };
  // 控制值
  // control?: 0 | 1 | undefined;
}

@Component  
export default class Devicework extends Vue {
  private broadcastChannel = getBroadcastInstance('PRODUCTION_PROCESSES_CHANGE');

  private yes: boolean = true;

  private timer: any = null;

  private isRunning: boolean = false

  // 产线ID
  private fworkId: string = '';

  // 典规ID值
  private standardId: string = '';

  // 工序ID值
  private processId: string = '';

  // 设备ID值
  private deviceId: string = '';

  private deviceData: any = {
    key: 'unknown',
    title: '空',
    params: []
  };

  mounted() {
    // 监听 跨页面通讯 更换 设备配置及数据
    // this.getDeviceConfig();
    // this.getDeviceData();

    this.broadcastChannel.addMessageHandler(this.handleBroadcastMessage);
  }

  private handleBroadcastMessage(data: any) {
    // console.log('接收方', data);
    if (data.type === 'production_processes_change') {
      const p = data.data;
      this.fworkId = p.fworkId;
      this.standardId = p.standardId;
      this.processId = p.processId;
      this.deviceId = p.deviceId;
      this.getDeviceData();
    }
  }

  private startTimer(time: number = 3000) {
    if (!this.isRunning) {
      this.isRunning = true
      this.timer = setInterval(() => {
        this.getDeviceData();
      }, time)
    }
  }

  private pauseTimer() {
    if (this.isRunning && !Tsrv.noValue(this.timer)) {
      clearInterval(this.timer)
      this.isRunning = false
    }
  }

  private getDeviceData() {
    if (this.deviceId) {
      const p = {
        fworkId: this.fworkId,
        standardId: this.standardId,
        currenttSelection: {
          processId: this.processId,
          deviceId: this.deviceId
        }
      }
      const param = {
        type: 'svcLogic',
        cmd: 'readDeviceInfo',
        userInfo: {},
        funInfo: {},
        data: p
      }

      Tcmd.doEvent(param).then(res=> {
        const [b, resp, data, msg] = res;
        if (b) {
          this.deviceData = data;
        }
      }).catch(err=> {
        this.$Message.error(err);
      });
    } else {
      this.$Message.error('未获取到设备ID');
      this.deviceData = {
        key: 'unknown',
        title: '空',
        params: [
        ]
      };
    }
  }

  private setValue() {
    // 根据 设备（槽）key值 获取设备参数 的 实时数据 —— real 的值
  }


  beforeDestroy() {
    this.pauseTimer();
    // 清理监听
    this.broadcastChannel.removeMessageHandler(this.handleBroadcastMessage);
  }
}
</script>

<style lang="scss" scoped>
.devicework-container {
  width: 100%;
  height: 100%;
  .device-work {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .device-list {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 50px 1fr;
      border: 1px solid #ccc; // 测试
      overflow: hidden;
      justify-items: center;
      align-items: center;
      border: 1px solid rgba(4, 231, 251, 0.8);

      .head {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 30px;
        background-color: rgba(4, 231, 251, 0.2);
 
        .head-left {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          .title-decorator {
            width: 5px;
            height: 20px;
            background-color: #04E7FB;
          }

          .title {
            margin-left: 10px;
            color: #FDFFFF;
            font-weight: bold;
          }
        }
        // margin-bottom: 10px;
        .head-right {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;

          .device-title {
            color: rgb(4, 231, 251);
            font-weight: bold;
          }
        }
      }
      .mian {
        width: 100%;
        height: 100%;
        margin-top: 10px;
        .device-lists {
          // height: 100%;
          height: calc(100% - 41px);
          width: 100%;
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr 3fr;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
          padding: 0 30px 0;

          .list-head {
            height: 50px;
            display: grid;
            // grid-template-columns: 4fr 3fr 3fr 3fr;
            grid-template-columns: 4fr 3fr 3fr;
            justify-items: center;
            align-items: center;
            border-bottom: 2px solid #0C8ECE;
            margin-bottom: 2px;
            
            div {
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 15px;
              color: rgb(4, 231, 251);
              text-align: center;
              font-style: normal;
            }
          }
          .list-body {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;

            overflow-y: auto;
            overflow-x: hidden;
            
            &::-webkit-scrollbar {
              width: 6px;
              background: #f5f5f5;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-track-piece {
              background: rgba(255, 255, 255, 0.2);
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb {
              background: #0C8ECE;
              border-radius: 6px;
            }

            .list-item {
              width: 100%;
              height: 47px;
              display: grid;
              // grid-template-columns: 4fr 3fr 3fr 3fr;
              grid-template-columns: 4fr 3fr 3fr;
              grid-template-rows: 1fr;
              justify-items: center;
              align-items: center;

              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #FDFFFF;
              text-align: left;
              font-style: normal;

              background-color: rgba(4, 231, 251, 0.2);

              .cell {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                // display: grid;
                // grid-template-columns: 1fr 1fr;
                // grid-template-rows: 1fr;
                // justify-items: center;
                // align-items: center;


                .cell-switch {
                  height: 70%;
                  width: 70%;
                  color: rgb(0, 255, 255);
                  background-color: rgb(4, 55, 83);
                  border-radius: 5px;
 
                  .active {
                    color: black;
                    background-color: rgb(0, 255, 255);
                  }
                  div {
                    flex: 1;
                    height: 100%;
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                  }
                }

                .cell-control {
                  display: flex;
                  flex-direction: row;
                  justify-content: space-around;
                  align-items: center;

                  .handle {
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                  }
                  .auto {
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                  }
                }

                .cell-on-off {
                  display: flex;
                  flex-direction: row;
                  justify-content: space-around;
                  align-items: center;

                  .on {
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                  }
                  .off {
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                  }
                }

                .cell-level {
                  display: flex;
                  flex-direction: row;
                  justify-content: space-around;
                  align-items: center;

                  .tall {
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                  }
                  .low {
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                  }
                }
 
              }
            }

            > .list-item:nth-of-type(odd) {
              /* 你的样式 */
              background-color: rgba(4, 231, 251, 0.5);
            }

            .text-bold {
              font-weight: 700;
            }

            .blue-text {
              color: #7EF0F9;
            }

          }
        }
      }
    }
  }                                     
}
</style>